// 思路:
// 1.初始化 npm安装包  "npm init"
// 2 下载webpack包   "npm i webpack"
// 3. 新建一个index.js文件
// 4. 配置webpack.config.js文件,放在直接项的根目录下(默认位置和默认的名字,)
// 5. 在package.json 配置webpack打包脚本
// 在配置文件中-->添加build:"webpack --config webpack.config.js"
// 6.运行npm脚本 (npm run bulid)会出现node_modules 文件,是基于node运行的脚本
/* 
通常项目的结构
    -webpack-demo // 是最外层,项目根目录文件
        -dist       // 需要在浏览器运行的根目录,一般是存放 index.html
        -node_modules  // 在下载npm 包时自动生成的文件名
        -src           // 开发根目录, 一般是存放静态资源,如.js .css .less文件
        -package.json  // 配置文件,npm init 初始化项目时自动生成的文件 ,主要是配置该项目打包的脚本,
        -webpack.config.js   // webpack配置文件
*/
/*
概念一:入口(entry) :
在webpack 中添加需要被执行的项目入口
测试git操作
module.exports = {
    entry: './src/index.js'
};
概念二:模块加载器
模块加载器webpack :主要是用于加载并处理其他的非js文件的文件,eg:自定义模板文件(vue),css/less/图片,字体等资源文件
因为nodejs环境下默认只认识js文件.
1: 加载css
// 安装两个加载器style-loader和css-loader，以下是两个组成的安装包
// 需要下载的依赖包:npm install --save-dev style-loader css-loader
在src中引入相关样式的css文件,后缀名为 .css

// 模块加载器的配置项,添加module数组
// rules 是每一项的配置  以对象的形式存储
2: 加载less
// 加载less配置与引入css是一样的
1)在src中添加less.css的文件
2)编写less语言
3)使用inport 引入该文件路径地址
4)需要下载安装 加载器   npm install --save-dev less less-loader
5)在webpack.config.js配置
6)再次执行打包
3: 加载图片
// 加载图片配置与引入less的步骤是一样的
1)在当前的根目录中创建images文件夹 存放img 资源
2)使用inport 引入该文件路径地址
3)需要下载安装 加载器   npm install --save-dev less less-loader
4)在webpack.config.js配置图片的相关路径
会自动在dist中生成images文件夹,存放图片的哈尔值 
5)再次执行打包
// 提取css文件
通过dist 文件发现打包出的文件并没有独立的css文件,用编辑器打开bundle.js文件会发现内容有document.createElement("style")字样
原因就是被打包bundle.js中

// 提出css文件的官网地址
// 引入需要引入的css文件,从webpack英文版的官网中,在外挂程式中的 -->  MiniCssExtractPlugin
分两步:
1) 引入配置项中的路径 == >>
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
2)在配置项中添加主要的配置
// 添加插件配置选项
plugins: [
    // 插件使用2. plugins 属性当中,创建实例, 按需添加参数
    // 这个插件如果不放任何参数, 默认生成 main.css 文件
    // 如果想要修改文件名, 就可以给一个配置对象, 然后里面添加 filename 属性
    new MiniCssExtractPlugin()
]
// 自动生成html
在目前的这种方式的打包资源,发现有很多的缺点,如: 文件名依赖问题,如果配置中的输出文件名修改了   那么同步后的文件名也是需要修改的
 所以可以使用可以使用[HtmlWebpackPlugin插件](https: //www.webpackjs.com/guides/output-management/#%E8%AE%BE%E5%AE%9A-htmlwebpackplugin) 
 自动引入打包后的资源文件到html文件，该插件需要指定一个html模板文件，并且会生成一个 index.html 文件到 dist 目录中。
 步骤1:在根目录下 创建public 文件夹,存入index.html
 步骤2: 在index.html中写入需要创建的模块
 步骤3: 在webpack.config.js中添加配置临时模板
 相关配置项:  new HtmlWebpackPlugin({
                template: "public/index.html"	// template指定默认html模板
            })
 步骤4: 下载需要依赖的安装包  npm install--save - dev html - webpack - plugin
 步骤5: 执行打包
 此时dist/ index.html被自动生成
 打开dist/index.html会发现已经自动引入资源了
打包前清理旧dist文件夹
参考官方文档
路径地址:https://www.webpackjs.com/guides/output-management/#%E6%B8%85%E7%90%86-dist-%E6%96%87%E4%BB%B6%E5%A4%B9
在每次打包前清除下 dist 文件夹
// 注意:中文文档有坑,要看英文的就可以啦,坑就是需要解构语法
安装依赖包
npm install --save-dev clean-webpack-plugin 
步骤1:在配置项引入清除的插件
// 导入清除插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
步骤2:清除打包目录的插件
// 调用清除打包目录插件
        new CleanWebpackPlugin(),
// 以上步骤完成后将即可执行打包
// 输出
在webpack.comfig.js中output 属性告诉webpack在哪里输出的 bundles,
以及如何命名这些文件，默认值为 `./dist`。基本上，整个应用程序结构，
都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 `output` 字段，
来配置这些处理过程：
步骤1:在配置中引入需要输入的文件名
entry: "./path/to/my/entry/file.js",
*/

/* 1.下载安装  npm install --save-dev mini-css-extract-plugin */
import "./style.css";
// 引入less路径地址: 但是需要下载安装  npm install --save-dev less less-loader
import "./style.less";
// 引入 images路径地址,需要下载安装   npm install --save-dev file-loader
import temp from "../images/temp01.jpg";

// 写入到html的内容
var element = document.createElement("div");
// let a = er;
//创建了一个div标签
element.innerHTML = `<div class="red">hello webpack</div>
<img src="${temp}"/>
`;

document.body.appendChild(element);

console.log("测试能不能引入");